
<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">主页</a>
    <a><cite>系统管理</cite></a>
    <a><cite>权限管理</cite></a>
    <a><cite>用户管理</cite></a>
  </div>
</div>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-tab layui-tab-brief">
      <ul class="layui-tab-title">
        <li class="layui-this">用户列表</li>
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
          <div class="layui-row">
            <div class="layui-form" style="float:right;">
              <div class="layui-form-item" style="margin:0;">
                <div class="layui-input-inline">
                  <input type="text" name="userId" id="searchUserId" autocomplete="off" placeholder="用户ID" class="layui-input">
                </div>
                <div class="layui-input-inline">
                  <input type="text" name="userName" id="searchUserName" autocomplete="off" placeholder="用户名" class="layui-input">
                </div>
                <div class="layui-input-inline">
                  <select name="type" id="searchStatus" lay-search="">
                    <option value="-99">状态</option>
                    <option value="1">启用</option>
                    <option value="0">停止</option>
                  </select>
                </div>
                <a id="search" class="layui-btn" data-type="reload"><i class="layui-icon layui-icon-search"></i>搜索</a>
              </div>
            </div>
          </div>
          <div class="layui-row">
            <div class="layuiAdmin-btns" style="margin-bottom: 10px;">
              <a class="layui-btn create"><i class="layui-icon layui-icon-add-1"></i>新增</a>
              <a class="layui-btn layui-btn-danger" data-type="all" data-events="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
            </div>
          </div>
          <table id="XxPay_Mgr_User_dataAll" lay-filter="XxPay_Mgr_User_dataAll"></table>
        </div>

      </div>
    </div>
  </div>
</div>

<script type="text/html" id="xxpayBar">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail"><i class='layui-icon layui-icon-about'></i>查看</a>
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="userRole"><i class="layui-icon layui-icon-user"></i>分配角色</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit"><i class='layui-icon layui-icon-edit'></i>编辑</a>
  <a class="layui-btn layui-btn-warm layui-btn-xs layui-hide securitySet" lay-event="securitySet"><i class='layui-icon layui-icon-set-sm'></i>安全设置</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
</script>

<script>
layui.use(['admin', 'table', 'util'], function(){
  var $ = layui.$
  ,admin = layui.admin
  ,table = layui.table
  ,element = layui.element
  ,view = layui.view
  ,form = layui.form;

  element.render('breadcrumb', 'breadcrumb');

    var tplStatus = function(d){
        var checkedHtml = " userId='"+d.userId+"' ";
        if(d.status == 1) {
            checkedHtml += " checked";
        }
        return '<input type="checkbox" lay-filter="statusSwitch" lay-skin="switch" '+checkedHtml+' lay-text="启用|停用">';
    };

  var tplUserName = function(d){

    var msgHtml = "<span style='color:red'>" + (d.countMsg ? d.countMsg : "") + "</span>";

    if(d.isSuperAdmin == 1) {
      return d.userName + " <span class='layui-badge'>超管</span> " + msgHtml;
    }
    return d.userName + msgHtml;
  };

  //用户列表
  table.render({
    elem: '#XxPay_Mgr_User_dataAll'
    ,url: layui.setter.baseUrl + '/sys/user/list' //用户列表接口
    ,where: {
      access_token: layui.data(layui.setter.tableName).access_token
    }
    ,id: 'tableReload'
    ,page: true
    ,cols: [[
      {type: 'checkbox', fixed: 'left'}
      ,{field: 'userId', title: '用户ID'}
      ,{field: 'userName', width:400, title: '用户名', templet: tplUserName}
      ,{field: 'nickName', title: '用户昵称'}
      ,{field: 'status', title: '状态', templet: tplStatus}
      ,{field: 'createTime', title: '创建时间', templet: '<div>{{ layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss") }}</div>'}
      ,{field: 'edit', width:420, fixed: "right",title: '操作', toolbar: '#xxpayBar' }
    ]]
    ,skin: 'line'
    ,done: function(res, curr, count){

      if (res.ps.isSuperAdmin == 1) { //仅当前登录用户为超级管理员才可配置用户的安全设置
        $(".securitySet").removeClass("layui-hide");
      }
    }
  });

  //监听工具条
  table.on('tool(XxPay_Mgr_User_dataAll)', function(obj){
    var data = obj.data;
    if(obj.event === 'detail'){
      // location.hash = "/sys/user/user_view/userId=" + data.userId;
      view.xxpayPopup("查看", "sys/ent/user/user_view", {userId: data.userId}, {btn: false, area:['40%','60%']});
    } else if(obj.event === 'del'){
      layer.confirm('确认删除么', function(index){
        admin.req({
          type: 'get',
          url: layui.setter.baseUrl + '/sys/user/delete',
          data: {
            userIds: data.userId,
          },
          success: function(res){
            if(res.code == 0) {
              layer.msg('删除成功', {
                icon: 1
              });
              table.reload("tableReload");
            }
          }
        });
      });
    } else if(obj.event === 'edit'){
      view.xxpayPopup("编辑", "sys/ent/user/user_edit", {userId: data.userId}, {area:['40%','60%']});
    } else if(obj.event === 'userRole'){
      view.xxpayPopup("分配角色", "sys/ent/user/user_role_save", {userId: data.userId}, {area:['40%','60%']});
    } else if (obj.event === 'securitySet') {

      //显示弹层
      view.xxpayPopup("安全设置", "sys/ent/user/security_set", {userId: data.userId}, {area:['80%','60%']});
    }
  });


  // 搜索
  var $ = layui.$, active = {
    reload: function(){
      var userId = $('#searchUserId').val();
      var userName = $("#searchUserName").val();
      var status = $("#searchStatus").val();
      //执行重载
      table.reload('tableReload', {
        page: {
          curr: 1 //重新从第 1 页开始
        }
        ,where: {
          userId: userId,
          userName: userName,
          status : status
        }
      });
    }
  };
  $('#search').on('click', function() {
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });

  // 事件处理
  var events = {
    del: function(othis, type){
      var checkStatus = table.checkStatus("tableReload")
      ,data = checkStatus.data; //获得选中的数据
      if(data.length === 0) return layer.msg('请选择数据');
      console.log(data);
      layer.confirm('确定删除选中的数据吗？', function(){
        var userIds = "";
        $.each(data, function(i, n){
          userIds = userIds + "," + n.userId;
        });
        console.log("userIds");
        if(userIds != "") {
          userIds = userIds.substring(1);
        }
        admin.req({
          type: 'get',
          url: layui.setter.baseUrl + '/sys/user/delete',
          data: {
            userIds: userIds
          },
          success: function(res){
            if(res.code == 0) {
              layer.msg('删除成功', {
                icon: 1
              });
              table.reload("tableReload");
            }
          }
        });
      });
    }
  };

  form.on('switch(statusSwitch)', function(data){

      var userId = $(data.elem).attr('userId');
      var updateState = data.elem.checked ? "1" : "0";
      var loadingIndex = layer.load();
      admin.req({
          type: "POST",
          url: layui.setter.baseUrl + '/sys/user/update',
          data: {userId: userId, status: updateState},
          success: function(res){
              if(res.code == 0) {
                  table.reload('tableReload');
              }
          },
          complete:function(){
              layer.close(loadingIndex);
          }
      });
  });

  $('.layuiAdmin-btns .layui-btn').on('click', function(){
    var othis = $(this)
            ,thisEvent = othis.data('events')
            ,type = othis.data('type');
    events[thisEvent] && events[thisEvent].call(this, othis, type);
  });

  $('.create').click(function(){
      view.xxpayPopup("新增", "sys/ent/user/user_add", {null: null}, {area:['60%','70%']});
  });
  // 渲染表单
  form.render();
});
</script>
